
import React from "react";

import { cn } from "@/lib/utils";
type RainbowButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  children: React.ReactNode;
  size?: "sm" | "md" | "lg";
  buttonType?: "primary" | "warning" | "danger" | "success";
};

export function RainbowButton({
  size="md",
  className,
  buttonType="primary",
  ...props
}: RainbowButtonProps) {

  const buttonSize = {
    sm: "h-8 text-sm px-4 py-1",
    md: "h-11 text-base px-6 py-2",
    lg: "h-14 text-lg px-8 py-3",
  }[size];

  const buttonTypeStr: string = {
    primary: "bg-[linear-gradient(#1CB17B,#1CB17B),linear-gradient(#1CB17B_50%,#1CB17B_80%,#1CB17B_0%),linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)]",
    warning: "bg-[linear-gradient(#FFA500,#FFA500),linear-gradient(#FFA500_50%,#FFA500_80%,#FFA500_0%),linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)]",
    danger: "bg-[linear-gradient(#CE2C31,#CE2C31),linear-gradient(#FF0000_50%,#CE2C31_80%,#CE2C31_0%),linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)]",
    success: "bg-[linear-gradient(#a4901a,#a4901a),linear-gradient(#a4901a_50%,#a4901a_80%,#a4901a_0%),linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)]",
  }[buttonType];

  return (
    <button
      className={cn(
        "group relative inline-flex animate-rainbow cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] font-medium text-primary-foreground transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:opacity-60 active:opacity-100",

        `${buttonSize}`,

         // before styles
         "before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))]",

        // light mode colors
        "bg-[linear-gradient(#1CB17B,#1CB17B),linear-gradient(#1CB17B_50%,#1CB17B_80%,#1CB17B_0%),linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff)]",
        `${buttonTypeStr}`,
        className,
      )}
      {...props}
    >
      {props.children}
    </button>
  );
}
